
//雷达图
// Schema:
// date,AQIindex,PM2.5,PM10,CO,NO2,SO2

var dataSH = [
	[91, 45, 125, 0.82, 34, 23, 1],
	[65, 27, 78, 0.86, 45, 29, 2]/*,
	[83, 60, 84, 1.09, 73, 27, 3],
	[109, 81, 121, 1.28, 68, 51, 4],
	[106, 77, 114, 1.07, 55, 51, 5],
	[109, 81, 121, 1.28, 68, 51, 6],
	[106, 77, 114, 1.07, 55, 51, 7],
	[89, 65, 78, 0.86, 51, 26, 8],
	[53, 33, 47, 0.64, 50, 17, 9],
	[80, 55, 80, 1.01, 75, 24, 10],
	[117, 81, 124, 1.03, 45, 24, 11],
	[99, 71, 142, 1.1, 62, 42, 12],
	[95, 69, 130, 1.28, 74, 50, 13],
	[116, 87, 131, 1.47, 84, 40, 14],
	[108, 80, 121, 1.3, 85, 37, 15],
	[134, 83, 167, 1.16, 57, 43, 16],
	[79, 43, 107, 1.05, 59, 37, 17],
	[71, 46, 89, 0.86, 64, 25, 18],
	[97, 71, 113, 1.17, 88, 31, 19],
	[84, 57, 91, 0.85, 55, 31, 20],
	[87, 63, 101, 0.9, 56, 41, 21],
	[104, 77, 119, 1.09, 73, 48, 22],
	[87, 62, 100, 1, 72, 28, 23],
	[168, 128, 172, 1.49, 97, 56, 24],
	[65, 45, 51, 0.74, 39, 17, 25],
	[39, 24, 38, 0.61, 47, 17, 26],
	[39, 24, 39, 0.59, 50, 19, 27],
	[93, 68, 96, 1.05, 79, 29, 28],
	[188, 143, 197, 1.66, 99, 51, 29],
	[174, 131, 174, 1.55, 108, 50, 30],
	[187, 143, 201, 1.39, 89, 53, 31]*/
];

var lineStyle = {
	normal: {
		width: 1,
		opacity: 0.5
	}
};


function getRadarOption(name,data){
	var radarOption = {
			legend: {
				show:false,
				bottom: 5,
				itemGap: 20,
				textStyle: {
					color: '#fff',
					fontSize: 14
				},
				selectedMode: 'single'
			},
			tooltip: {
        trigger: 'item'
    	},
			radar: {
				indicator: [{
						name: '企业用户',
						max: 15
					},
					{
						name: '接入企业数量',
						max: 10
					},
					{
						name: 'IP',
						max: 250
					},
					{
						name: '访问量',
						max: 101649
					},
					{
						name: '覆盖率',
						max: 1
					}
				],
				radius: '60%',
				center: ['50%', '60%'],
				shape: 'circle',
				splitNumber: 5,
				name: {
					textStyle: {
						color: 'rgb(238, 197, 102)'
					}
				},
				splitLine: {
					lineStyle: {
						width: 1,
						color: [
							'rgba(255, 255, 255, 0.5)', 'rgba(255, 255, 255, 0.6)',
							'rgba(255, 255, 255, 0.7)', 'rgba(255, 255, 255, 0.8)',
							'rgba(255, 255, 255, 0.9)', 'rgba(255, 255, 255, 1)'
						].reverse()
					}
				},
				splitArea: {
					show: false
				},
				axisLine: {
					lineStyle: {
						width: 2,
						color: 'rgba(255, 255, 255,0.6)'
					}
				}
			},
			series: [
				{
					name: name,
					type: 'radar',
					lineStyle: lineStyle,
					label: {
          	show:true  
          },
					data: data,
					symbol: 'circle',
					itemStyle: {
						normal: {
							color: '#F9713C'
						}
					},
					areaStyle: {
						normal: {
							color: '#F9713C'
						}
					}
				}
			]
		};
	return radarOption;
}

var radarChart = echarts.init(document.getElementById('radarOptionEc'))
radarChart.setOption(getRadarOption('北京',[[11,9,100,88,0.3]]))


//饼图
var data1st=[
	{value:124, name:'已加速'},
  {value:1107, name:'未加速'}
]

var data2st=[
	{value:3054, name:'传统IDC'},
  {value:378, name:'云资源'}
]

function dataLegend(data){
	var dataLe=[];
	for(var i=0;i<data.length;i++){
		dataLe.push(data[i].name)
	}
	return dataLe
}

var pieOpt= function(){
	return {
		color : ["#fce24f","#09e24b","#09e2cb","#09a7e2", "#0841b6", "#30059c", "#68059c","#9c058c","#9c0550","#b8ff2e"],
	  tooltip : {
	      trigger: 'item',
	      formatter: "{a} <br/>{b} : {c} ({d}%)"
	  },
	  legend: {
	//	      orient: 'vertical',
//	      left: 'left',
	      bottom: '3%',
	      textStyle :{
	      	color: '#fff'
	      }
	  },
	  series : [
	    {
	      name: '访问来源',
	      type: 'pie',
	      radius : ['40%','60%'],
	      center: ['50%', '45%'],
	      data:[],
	      avoidLabelOverlap: false,
	      label: {
          normal: {
              show: true,
//            position: 'center'
          },
          emphasis: {
              show: true,
//            textStyle: {
//                fontSize: '20',
//                fontWeight: 'bold'
//            }
          }
        },
        labelLine: {
            normal: {
                show: true
            }
        },
	      itemStyle: {
	          emphasis: {
	              shadowBlur: 10,
	              shadowOffsetX: 0,
	              shadowColor: 'rgba(0, 0, 0, 0.5)'
	          }
	      }
	    }
	  ]
	}
}


var pieOptRight=pieOpt();
pieOptRight.series[0].data=data2st;
pieOptRight.legend.data=dataLegend(data2st)
var pieChartRight = echarts.init(document.getElementById('ecPie2'));
pieChartRight.setOption(pieOptRight);

//柱状图2
var dataX=['上海','广东','江苏','浙江','北京','河北','安徽','福建','四川','广西']
var data1=[13,12,12,12,11,11,8,8,6,4]
var data2=[5,7,2,3,9,3,1,2,2,2]
var barOption2 = {
		color:["#c8fd6f","#08e2ca"],
    tooltip: {
        trigger: 'axis'
//      axisPointer: {
//          type: 'cross',
//          crossStyle: {
//              color: '#999'
//          }
//      }
    },
    toolbox: {
    	show:false,
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
    	show:true,
    	top:'top',
    	textStyle:{
    		color:'#fff'
    	},
      data:['企业用户数量','接入企业数量']
    },
    grid: {
        left:30,
        top: 45,
        right:10
    },
    xAxis: [
        {
          type: 'category',
          data: dataX,
          axisPointer: {
              type: 'shadow'
          },
          axisLabel:{
          	color:'#c0d4da'
          },
	        axisLine:{
	        	show:true,
	        	lineStyle:{
	        		color:'#c0d4da'
	        	}
	        }
        }
    ],
    yAxis: [
        {
          type: 'value',
          name: '单位',
          min: 0,
//        max: 250,
          interval: 50,
          axisLabel: {
            color:'#c0d4da'
          },
          axisLine:{
	        	show:true,
	        	lineStyle:{
	        		color:'#c0d4da'
	        	}
        	},
        	splitLine:{
        		lineStyle:{
	        		color:'#272858'
	        	}
        	}
        }
    ],
    series: [
      {name:'企业用户数量',
        type:'line',
        smooth:true,
        symbol: 'circle',
        barWidth:'25%',
        data:data1
      },{
        name:'接入企业数量',
        type:'bar',
        barWidth:'25%',
        data:data2
      }
    ]
};

var barChart2 = echarts.init(document.getElementById('ecBar2'))
barChart2.setOption(barOption2)

//地图
var mapData=[
  {name: '北京',value: 100 },
  {name: '天津',value: 20},
  {name: '上海',value: 246},
  {name: '重庆',value: 2 },
  {name: '河北',value: 2},
  {name: '河南',value:5 },
  {name: '云南',value: 0 },
  {name: '辽宁',value: 65 },
  {name: '黑龙江',value: 1 },
  {name: '湖南',value: 17 },
  {name: '安徽',value: 156 },
  {name: '山东',value: 6 },
  {name: '新疆',value: 4},
  {name: '江苏',value: 94 },
  {name: '浙江',value: 25 },
  {name: '江西',value: 3 },
  {name: '湖北',value: 31 },
  {name: '广西',value: 226 },
  {name: '甘肃',value: 0 },
  {name: '山西',value: 1 },
  {name: '内蒙古',value: 0 },
  {name: '陕西',value: 3 },
  {name: '吉林',value: 2 },
  {name: '福建',value: 5 },
  {name: '贵州',value: 0 },
  {name: '广东',value: 197 },
  {name: '青海',value: 0 },
  {name: '西藏',value: 0 },
  {name: '四川',value: 20 },
  {name: '宁夏',value: 0 },
  {name: '海南',value: 0 },
  {name: '台湾',value: 0 },
  {name: '香港',value: 0 },
  {name: '澳门',value: 0 }
]

var that = this;
var optionMap = {
	tooltip: {
		trigger: 'item',
		formatter:function(param){
			var name = param.name;
			var divInfo = null;
			if(name == '北京'){
				divInfo = '<div>企业用户数：11</div><div>接入企业数量：9</div><div>接入IP数：100</div><div>访问量：88</div><div>覆盖率：90%</div>';
			}else if(name == '天津'){
				divInfo = '<div>企业用户数：4</div><div>接入企业数量：2</div><div>接入IP数：20</div><div>访问量：30</div><div>覆盖率：90%</div>';
			}else if(name == '上海'){
				divInfo = '<div>企业用户数：13</div><div>接入企业数量：5</div><div>接入IP数：246</div><div>访问量：448</div><div>覆盖率：90%</div>';
			}else if(name == '重庆'){
				divInfo = '<div>企业用户数：2</div><div>接入企业数量：2</div><div>接入IP数：2</div><div>访问量：0</div><div>覆盖率：90%</div>';
			}else if(name == '河北'){
				divInfo = '<div>企业用户数：11</div><div>接入企业数量：3</div><div>接入IP数：2</div><div>访问量：0</div><div>覆盖率：90%</div>';
			}else if(name == '河南'){
				divInfo = '<div>企业用户数：4</div><div>接入企业数量：2</div><div>接入IP数：5</div><div>访问量：2</div><div>覆盖率：90%</div>';
			}else if(name == '云南'){
				divInfo = '<div>企业用户数：0</div><div>接入企业数量：0</div><div>接入IP数：0</div><div>访问量：0</div><div>覆盖率：0</div>';
			}else if(name == '辽宁'){
				divInfo = '<div>企业用户数：3</div><div>接入企业数量：3</div><div>接入IP数：65</div><div>访问量：71</div><div>覆盖率：90%</div>';
			}else if(name == '黑龙江'){
				divInfo = '<div>企业用户数：1</div><div>接入企业数量：1</div><div>接入IP数：1</div><div>访问量：2</div><div>覆盖率：90%</div>';
			}else if(name == '湖南'){
				divInfo = '<div>企业用户数：1</div><div>接入企业数量：2</div><div>接入IP数：17</div><div>访问量：59</div><div>覆盖率：90%</div>';
			}else if(name == '安徽'){
				divInfo = '<div>企业用户数：8</div><div>接入企业数量：1</div><div>接入IP数：156</div><div>访问量：312</div><div>覆盖率：90%</div>';
			}else if(name =='山东'){
				divInfo = '<div>企业用户数：2</div><div>接入企业数量：2</div><div>接入IP数：6</div><div>访问量：12</div><div>覆盖率：90%</div>';
			}else if(name == '新疆'){
				divInfo = '<div>企业用户数：0</div><div>接入企业数量：2</div><div>接入IP数：4</div><div>访问量：0</div><div>覆盖率：90%</div>';
			}else if(name == '江苏'){
				divInfo = '<div>企业用户数：12</div><div>接入企业数量：2</div><div>接入IP数：94</div><div>访问量：101649</div><div>覆盖率：90%</div>';
			}else if(name == '浙江'){
				divInfo = '<div>企业用户数：12</div><div>接入企业数量：3</div><div>接入IP数：25</div><div>访问量：9</div><div>覆盖率：90%</div>';
			}else if(name == '江西'){
				divInfo = '<div>企业用户数：0</div><div>接入企业数量：1</div><div>接入IP数：3</div><div>访问量：5</div><div>覆盖率：90%</div>';
			}else if(name == '湖北'){
				divInfo = '<div>企业用户数：1</div><div>接入企业数量：3</div><div>接入IP数：31</div><div>访问量：25</div><div>覆盖率：90%</div>';
			}else if(name == '广西'){
				divInfo = '<div>企业用户数：4</div><div>接入企业数量：2</div><div>接入IP数：226</div><div>访问量：267</div><div>覆盖率：90%</div>';
			}else if(name == '甘肃'){
				divInfo = '<div>企业用户数：0</div><div>接入企业数量：0</div><div>接入IP数：0</div><div>访问量：0</div><div>覆盖率：0</div>';
			}else if(name == '山西'){
				divInfo = '<div>企业用户数：0</div><div>接入企业数量：1</div><div>接入IP数：1</div><div>访问量：0</div><div>覆盖率：90%</div>';
			}else if(name == '内蒙古'){
				divInfo = '<div>企业用户数：1</div><div>接入企业数量：0</div><div>接入IP数：0</div><div>访问量：0</div><div>覆盖率：90%</div>';
			}else if(name == '陕西'){
				divInfo = '<div>企业用户数：3</div><div>接入企业数量：3</div><div>接入IP数：3</div><div>访问量：1</div><div>覆盖率：90%</div>';
			}else if(name == '吉林'){
				divInfo = '<div>企业用户数：2</div><div>接入企业数量：1</div><div>接入IP数：2</div><div>访问量：0</div><div>覆盖率：90%</div>';
			}else if(name == '福建'){
				divInfo = '<div>企业用户数：8</div><div>接入企业数量：2</div><div>接入IP数：5</div><div>访问量：0</div><div>覆盖率：90%</div>';
			}else if(name == '贵州'){
				divInfo = '<div>企业用户数：0</div><div>接入企业数量：0</div><div>接入IP数：0</div><div>访问量：0</div><div>覆盖率：0</div>';
			}else if(name == '广东'){
				divInfo = '<div>企业用户数：12</div><div>接入企业数量：7</div><div>接入IP数：197</div><div>访问量：242</div><div>覆盖率：90%</div>';
			}else if(name == '青海'){
				divInfo = '<div>企业用户数：0</div><div>接入企业数量：0</div><div>接入IP数：0</div><div>访问量：0</div><div>覆盖率：0</div>';
			}else if(name == '西藏'){
				divInfo = '<div>企业用户数：0</div><div>接入企业数量：0</div><div>接入IP数：0</div><div>访问量：0</div><div>覆盖率：0</div>';
			}else if(name == '四川'){
				divInfo = '<div>企业用户数：6</div><div>接入企业数量：2</div><div>接入IP数：20</div><div>访问量：3</div><div>覆盖率：90%</div>';
			}else if(name == '宁夏'){
				divInfo = '<div>企业用户数：0</div><div>接入企业数量：0</div><div>接入IP数：0</div><div>访问量：0</div><div>覆盖率：0</div>';
			}else if(name == '海南'){
				divInfo = '<div>企业用户数：1</div><div>接入企业数量：0</div><div>接入IP数：0</div><div>访问量：0</div><div>覆盖率：90%</div>';
			}
			return '<div>'+param.name+'</div>'+divInfo;
		}
	},
	visualMap: {
    seriesIndex: 0,
    min: 0,
    max: 300,
    left: '10%',
    itemWidth: 15,
		itemHeight: 90,
    bottom: '10%',
    inRange: {
      color: {
      	0:'rgba(0,0,0,0)'
      },
      color: ['#42a5e1','#065482']
    },
//      text: ['高','低'],           // 文本，默认为数值文本
    calculable: true,
    textStyle:{
    	color:'#fff'
    }
//  hoverLink: false
	},
	series: [{
		zoom: 1.2,
		type: 'map',
		top:'8%',
		mapType: 'china',
		roam: true,
		label: {
			normal: {
				show: false,
				textStyle: {
					color: '#fff'
				}
			},
			emphasis: {
				show: false,
				textStyle: {
					color: '#fff'
				}
			}
		},
		itemStyle: {
			normal: {
				show:false,
				borderColor: '#16cffa',
				borderWidth: 1,
				areaColor: 'rgba(0,0,0,0.2)'
			},
			emphasis: {
				areaColor: '#fce24f',
				borderColor: '#fce24f'
			}
		},
		data:mapData
	}]
};
var mapChart = echarts.init(document.getElementById('ecMap'));
mapChart.setOption(optionMap)

//var autoData =  ['北京','天津','上海','重庆','河北','河南','云南','辽宁','黑龙江','湖南','安徽','山东','新疆','江苏','浙江','江西','湖北','广西','甘肃','山西','内蒙古','陕西','吉林','福建','贵州','广东','青海','西藏','四川','宁夏','海南','台湾','香港','澳门'];
//autoData[i] 按事先预定的顺序伦顺
var n=0;
function auto(){
	if(n>mapData.length-1){
		n=0;
	}
	for(var i=0;i<mapData.length;i++){
		mapData[i].selected=false;
	}
	var name = mapData[n].name;
	if(name != '台湾' && name != '香港' && name != '澳门'){
		mapData[n].selected = true;
		$("#province_info").empty();
		$("#province_info").append(name+"工业互联网融合指数");
		getTradarData(name);
		mapChart.setOption(optionMap);
	}
	n++;
}
auto();
var timer=setInterval(auto,2000)

mapChart.on('mouseover',function(){
	clearInterval(timer)
})

mapChart.on('mouseout',function(){
	clearInterval(timer)
	timer=setInterval(auto,2000)
})

function getTradarData(name){
	var data = null;
	if(name == '北京'){
		data = [[11,9,100,88,0.9]];
	}else if(name == '天津'){
		data = [[4,2,20,30,0.7]];
	}else if(name == '上海'){
		data = [[13,5,246,448,0.9]];
	}else if(name == '重庆'){
		data = [[2,2,2,0,0.9]];
	}else if(name == '河北'){
		data = [[11,3,2,0,0.9]];
	}else if(name == '河南'){
		data = [[4,2,5,2,0.9]];
	}else if(name == '云南'){
		data = [[0,0,0,0,0]];
	}else if(name == '辽宁'){
		data = [[3,3,65,71,0.9]];
	}else if(name == '黑龙江'){
		data = [[1,1,1,2,0.7]];
	}else if(name == '湖南'){
		data = [[1,2,17,59,0.9]];
	}else if(name == '安徽'){
		data = [[8,1,156,312,0.9]];
	}else if(name =='山东'){
		data = [[2,2,6,12,0.9]];
	}else if(name == '新疆'){
		data = [[0,2,4,0,0.9]];
	}else if(name == '江苏'){
		data = [[12,2,94,101649,0.9]];
	}else if(name == '浙江'){
		data = [[12,3,25,9,0.9]];
	}else if(name == '江西'){
		data = [[0,1,3,5,0.9]];
	}else if(name == '湖北'){
		data = [[1,3,31,25,0.9]];
	}else if(name == '广西'){
		data = [[4,2,226,267,0.9]];
	}else if(name == '甘肃'){
		data = [[0,0,0,0,0]];
	}else if(name == '山西'){
		data = [[0,1,1,0,0.9]];
	}else if(name == '内蒙古'){
		data = [[1,0,0,0,0.9]];
	}else if(name == '陕西'){
		data = [[3,3,3,1,0.9]];
	}else if(name == '吉林'){
		data = [[2,1,2,0,0.9]];
	}else if(name == '福建'){
		data = [[8,2,5,0,0.9]];
	}else if(name == '贵州'){
		data = [[0,0,0,0,0]];
	}else if(name == '广东'){
		data = [[12,7,197,242,0.9]];
	}else if(name == '青海'){
		data = [[0,0,0,0,0]];
	}else if(name == '西藏'){
		data = [[0,0,0,0,0]];
	}else if(name == '四川'){
		data = [[6,2,20,3,0.9]];
	}else if(name == '宁夏'){
		data = [[0,0,0,0,0]];
	}else if(name == '海南'){
		data = [[1,0,0,0,0.9]];
	}
	var option = getRadarOption(name,data);
	radarChart.setOption(option);
}

mapChart.on('click',function(param){
	var name = param.name;
	$("#province_info").empty();
	$("#province_info").append(name+"工业互联网融合指数");
	getTradarData(name);
})

window.addEventListener('resize',function(){
//	pieChartLeft.resize();
	pieChartRight.resize();
	mapChart.resize();
	radarChart.resize();
	barChart2.resize();
	
//	LineChart.resize()
})
